﻿@page "/starrail"
@implements IDisposable
@rendermode InteractiveWebAssembly
@inject HttpClient client

<ImageBackground razorName="star rail"></ImageBackground>
<div style="padding:20px;">
    <div style="display:flex;align-items:center;">
        <img src="images/star rail/logo.webp" style="height: 150px; margin-right: 10px;" />
        <h1>星穹铁道</h1>
    </div>
    <p>点击即可下载图片</p>
    <hr />
    <div class="border-div">
        @foreach (var index in ImageDataList)
        {
            <a href="images/@index.imageUrl" download>
                <img src="images/@index.imageUrl" class="scroll-image" style="transform:translateX(@(index.positon)px); opacity:@index.opacity; transition: all @index.duration ease ;" />
            </a>
        }
    </div>
</div>

@code {

    public List<string>? imageList { get; set; }

    private List<ImageData> ImageDataList = new List<ImageData>();

    private Timer? IndexTimer { get; set; }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        if (imageList == null && client.BaseAddress != null)
        {
            HttpResponseMessage response = await client.GetAsync($"{client.BaseAddress}api/filename/star rail");
            response.EnsureSuccessStatusCode();
            imageList = await response.Content.ReadFromJsonAsync<List<string>>();
        }
        else
        {
            imageList = new List<string>();
        }
        int i = 0;
        while (i < imageList.Count)
        {
            ImageDataList.Add(new ImageData { index = i, positon = -1 * 319, imageUrl = imageList[i] });
            i++;
        }
        IndexTimer = new Timer(3000); //注意，定时器的时间间隔必须大于组件<img>的transition-duration，否则可能出现轮播动画的抽动
        IndexTimer.AutoReset = true;
        IndexTimer.Elapsed += (sender, e) =>
        {
            InvokeAsync(() =>
            {
                foreach (var imagedata in ImageDataList)
                {
                    if (imagedata.positon == (ImageDataList.Count - imagedata.index - 2) * 319)
                    {
                        imagedata.opacity = 0;
                        imagedata.duration = "0";
                        imagedata.positon = -(imagedata.index + 1) * (319);
                    }
                    else
                    {
                        imagedata.opacity = 1;
                        imagedata.duration = "2s";
                        imagedata.positon += 319;
                    }
                }
                StateHasChanged();
            });
        };
        IndexTimer.Enabled = true;
    }

    public void Dispose()
    {
        IndexTimer!.Stop();
        IndexTimer.Dispose();
        IndexTimer = null;
    }

    public class ImageData
    {
        public double index; // 图片序号
        public string imageUrl = string.Empty; // 图片存放路径
        public string duration = "2s"; // 完成动画过度需要的时间
        public double opacity = 1; // 图片透明度
        public double positon = 0; // 图片坐标
    }
}
